<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto、Jacob Thornton 以及众多 Bootstrap 贡献者">
    <meta name="generator" content="Hugo 0.91.2">
    <title>WALLPAPER SPACE</title>

    <link rel="canonical" href="https://v4.bootcss.com/docs/examples/carousel/">
    <script src="/static/js/jquery-3.6.0.js"></script>
    <!-- Bootstrap core CSS -->
    <link href="/static/bootstrap-4.6.1-dist/css/bootstrap.min.css" rel="stylesheet">
    <meta name="msapplication-config" content="/docs/4.6/assets/img/favicons/browserconfig.xml">
    <meta name="theme-color" content="#563d7c">
    <link href="/static/css/index.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="/static/css/carousel.css" rel="stylesheet">
    <script src="/static/js/jquery.form.js"></script>
</head>
<body>
<header>
    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
        <a class="navbar-brand" href="/pages/index.html">WALLPAPER&nbsp;&nbsp;SPACE</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" ><span class="sr-only">(current)</span></a>
                </li>
            </ul>
            <form class="form-inline mt-2 mt-md-0">
                <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
            <div class="btn btn-outline-success my-2 my-sm-0"
                 style="margin-left: 20px;" id="sign-in">登录/注册
            </div>
            <div class="grzx" style="display: none">
                <button class="btn btn-outline-success my-2 my-sm-0" id="upload1">上传壁纸</button>
                <button class="btn btn-outline-success my-2 my-sm-0 signout">登出</button>
            </div>
            <div class="adminzx" style="display: none">
                <button class="btn btn-outline-success my-2 my-sm-0" id="admin">后台管理</button>
                <button class="btn btn-outline-success my-2 my-sm-0 signout">登出</button>
            </div>
        </div>
    </nav>
</header>
    <div class="container">
        <div class="row" style="margin-top: 25px;border: 2px solid bisque; border-radius: 5%; padding: 10px;">
            <div class="col-sm-6" style="border: lightgray 1px solid;border-radius: 5%; overflow: hidden;padding: 0">
                <img id="ylt" src="https://wkptc.oss-cn-guangzhou.aliyuncs.com/图片预览区.png" width="100%" alt="">
            </div>
            <div class="col-sm-6" style="padding: 10px" >
                <form id="form1" action="http://120.24.250.180:1880/api/index.php" method="post" >
                    <div class="custom-file">
                        <label for="inputGroupFile01">选择图片</label>
                        <input type="file" class="custom-file-input image" name="image" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
                        <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
                    </div>
                    <label for="token"></label>
                    <input id="token" style="display: none" type="text" name="token" placeholder="在tokenList文件找到token并输入" value="8337effca0ddfcd9c5899f3509b23657" />
                </form>

                <form action="#">
                    <div class="form-group">
                        <label for="wallpaperName">图片名称</label>
                        <input type="email" class="form-control" id="wallpaperName" aria-describedby="emailHelp">
                        <!--<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>-->
                    </div>
                    <!--<div class="form-group">-->
                    <!--    <label for="exampleInputPassword1">图片大小</label>-->
                    <!--    <input type="text" class="form-control" id="exampleInputPassword1" style="text-align: center" value=" 0 X 0 " disabled>-->
                    <!--</div>-->
                    <div class="form-group">
                        <p>图片标签</p>
                        <div style="height: 300px;float: left;" id="labellist">
                            <div id="labels" style="float: left">
                                <label>
                                    <input type="text" class="form-control wallpaperlabel">
                                </label>
                            </div>
                                <label style="float: left">
                                    <input type="button" class="btn btn-light" id="addlabel" value="+" style="width: 40px" />
                                </label>

                        </div>
                    </div>
                    <button class="btn btn-lg btn-primary btn-block" type="button" id="upload">上传</button>
                    <label for="wallpaperUrl"></label><input style="display: none" type="text" name="wallpaperUrl" id="wallpaperUrl">
                    <label for="wallpaperThumb"></label><input style="display: none" type="text" name="wallpaperThumb" id="wallpaperThumb">
                </form>
            </div>
        </div>
    </div>
    <script>
        $(".image").change(function (){
            $("#form1").ajaxSubmit(function (data) {
                console.log(data);
                $('#ylt').attr("src",data.url);
                $('#wallpaperUrl').val(data.url);
                $('#wallpaperThumb').val(data.thumb);
            });
        })
        $('#addlabel').click(function() {
            if ($('.wallpaperlabel').length===10){
                alert("标签上限为10个");
            }else{
                $('#labels').append(' <label><input type="text" class="form-control wallpaperlabel"></label>')
            }
        })
        $('#upload').click(function (){
            var labels = [];
            $('.wallpaperlabel').each(function(key,value){
                labels[key] = $(this).val();      //如果是其他标签 用 html();
                // 或btn[key] = $(value).val();
            });
            $.ajax({
                url:'/wallpaper',
                data:JSON.stringify({
                    "wallpaperName":$('#wallpaperName').val(),
                    "wallpaperUrl":$('#wallpaperUrl').val(),
                    "wallpaperThumb":$('#wallpaperThumb').val(),
                    "labellist":labels,
                }),
                type:'post',
                dataType:'json',
                headers:{
                    Accept:"application/json",
                    "Content-Type":"application/json"
                },
                processData:false,
                cache:false
            }).done(function (data) {
                alert("上传成功,请等待审核");
                $(window).attr('location',"/pages/index.html");
            })
        });
    </script>
    <script>
        $('#sign-in').click(function (){
            // console.log("按钮测试");
            //跳转到登录页面
            $(window).attr('location',"/pages/signin.html");
        })
        $('#upload1').click(function (){
            $(window).attr('location',"/pages/upload.html");
        })
        $('.signout').click(function (){
            $(window).attr('location',"/user/loginout");
        })
        $('#admin').click(function (){
            $(window).attr('location',"/wallpaper/main");
        })
    </script>
<script>
    $(document).ready(function (){
        $.ajax({
            url:'/user/checklogin',
            type:'post',
            headers:{
                Accept:"application/json",
                "Content-Type":"application/json"
            },
            processData:false,
            cache:false
        }).done(function (data) {
            if (data.code===30001){
                $('.adminzx').css("display","block");
                $('#sign-in').css("display","none");
                $(".grzx").css("display","none");
            }else if(data.code===20000){
                $('.adminzx').css("display","none");
                $('#sign-in').css("display","none");
                $(".grzx").css("display","block");
            }else{
                $('.adminzx').css("display","none");
                $('#sign-in').css("display","block");
                $(".grzx").css("display","none");
            }
        });
    })
</script>
</body>
</html>